<template>
	<view>
		<image src="../../static/images/beforeLogin.jpg"></image>
		<button class="btn" @click="show = true">微信登录</button>
		<text class="www">copyright © 2019 www.g7.com.cn</text>
		<view>
			<u-popup class="popupContainer" v-model="show" mode="bottom" border-radius="14" length="40%">
				<view class="imgTxt">
					<image class="img" src="../../static/images/minilogo.png"></image>
					<text>司小宝®&nbsp;&nbsp;&nbsp;&nbsp;申请试用</text>
				</view>
				<text class="yourPhone">您的手机号码</text>
				<u-divider></u-divider>
				<text class="phoneWechat">183****5091 微信绑定号码</text>
				<u-divider></u-divider>
				<text class="otherPhone">使用其他手机号码</text>
				<view class="footer">
					<button class="footerBtnLeft" type="info" @click="refuse">拒绝</button>
					<button class="footerBtnRight" type="primary" @click="toAgreement">允许</button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
//引入vuex辅助函数
// import {mapMutations} from 'vuex';
export default {
	//响应式数据
	data() {
		return {
			code: '', //微信临时登录凭证
			show: false //弹出层弹出的标识
		};
	},
	//获取用户临时登录凭证
	getCode() {
		//调用uniapp框架的登录方法
		uni.login({
			//成功的回调
			success: res => {
				//判断
				if (res.errMsg == 'login:ok') {
					this.code = res.code;
				} else {
					//提示信息
					uni.showToast({
						title: 'error'
					});
				}
			}
		});
	},
	//组件实例的方法
	methods: {
		//如果vuex中封装了登陆的mutation的话就可以在这个地方使用辅助函数
		// ...mapMutations(['login']),
		//微信授权登录
		getUserInfo(e) {
			//这里是一个闭包 要用到外部函数作用域的this指向
			let that = this;
			let p = this.getSetting();
			p.then(function(isAuth) {
				console.log('是否已经授权', isAuth);
				if (isAuth) {
					console.log('用户信息，加密数据', e);
					//eData  包括//微信头像//微信名称 还有加密的数据.
					let eData = JSON.parse(e.detail.rawData);
					//访问接口.
					uni.request({
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						url: '', //接口地址
						method: '', //接口类型
						data: '', //接口需要的数据
						success: function(res) {
							console.log(res);
							if (res.data.Success) {
								that.login(res.data); //将接口返回的数据保存在全局变量中.
								//登录成功跳转首页或者你想跳转的地方...
								//如果是导航页 用uni.switchTab --> 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
								//如果是其他页面用uni.reLaunch --> 关闭所有页面 打开到应用内的某个页面
							} else {
								uni.showToast({
									title: '授权登录失败！',
									mask: true,
									icon: 'none'
								});
							}
						}
					});
				} else {
					uni.showToast({
						title: '授权失败，请确认授权已开启',
						mask: true,
						icon: 'none'
					});
				}
			});
		},
		//获取用户的授权
		getSetting() {
			//返回的是一个prioise对象
			return new Promise((resolve, reject) => {
				//获取用户设置
				uni.getSetting({
					//成功的回调
					success: res => {
						//判断
						if (res.authSetting['scope.userInfo']) {
							console.log('存在');
							//调用resolve
							resolve(true);
						} else {
							console.log('不存在');
							//调用reject
							resolve(false);
						}
					}
				});
				//失败的回调
			}).catch(e => {
				console.log(e);
			});
		},
		//点击弹框中的拒绝的方法
		refuse(){
			this.show = false
		},
		//点击弹框中的允许的方法
		toAgreement() {
			//路由跳转
			uni.reLaunch({
				url: '../agreement/agreement'
			});
		}
	}
};
</script>

<style lang="scss">
image {
	width: 100%;
	height: 1000upx;
}
button {
	width: 500upx;
	height: 70upx;
	font-size: 28upx;
	text-align: center;
	line-height: 80upx;
	background-color: rgb(78, 48, 221);
	color: #fff;
	margin: 40upx auto;
}
.www {
	display: block;
	text-align: center;
	margin-top: 20upx;
	color: #ccc;
}
.imgTxt {
	width: 100%;
	height: 100upx;
	.img {
		display: inline-block;
		width: 60upx;
		height: 60upx;
		vertical-align: middle;
		margin: 20upx 20upx;
	}
	text {
		display: inline-block;
		font-size: 28upx;
		color: #000;
		line-height: 60upx;
		margin: 20upx 20upx;
	}
}
.yourPhone {
	display: block;
	color: #000;
	font-size: 50upx;
	margin-bottom: 25upx;
	margin-left: 25upx;
}
.phoneWechat {
	display: block;
	color: #000;
	font-size: 30upx;
	margin: 25upx 25upx;
}
.otherPhone {
	display: block;
	color: #000;
	font-size: 30upx;
	margin-left: 25upx;
	text-decoration: underline;
}
.footer{
	display: flex;
	.footerBtnLeft {
		width: 300upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: rgb(26,173,25);
		background-color: #eee;
	}
	.footerBtnRight {
		width: 300upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
	}
}

</style>
